<template>
		<picker mode="multiSelector" @change="bindGradeChange" @columnchange="bindGradeColumnChange"
		:disabled="disabled"
		:name="name" :value="gradeMlt[0][curSlct[0]]+gradeMlt[1][curSlct[1]]" :range="gradeMlt">

			<view class="box unInput">
				<!-- {{gradeMlt[0][curSlct[0]]}}{{gradeMlt[1][curSlct[1]]}} -->
				{{value}} ▽
			</view>
		</picker>
</template>

<script>
	export default {
		name:"grade-picker",
		data() {
			return {
				xiao: ['请选择年级', '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
				zhong: [ '请选择年级', '一年级', '二年级', '三年级'],

				gradeMlt: [
				  ['小学', '初中', '高中', '成人教育'],
				  ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '专升本', '成人高考', '等级证书'],
				],
				curSlct: [0, 0],
			};
		},
		props:[
			'name',
			'value',
			'disabled'
		],
		methods:{
			bindGradeChange(e){
				console.log('picker发送选择确认，携带值为', e.detail.value)
				this.curSlct = e.detail.value
				this.$emit('change',{value:this.gradeMlt[0][this.curSlct[0]]+this.gradeMlt[1][this.curSlct[1]]})
			},
			bindGradeColumnChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.column, e.detail.value)
				let {gradeMlt,curSlct} = this.$data
				// 在小学和中学之间切换时, 修改年级
				if (e.detail.column == 0) {
					if (e.detail.value == 0) {
						gradeMlt[1] = this.xiao
					} else {
						gradeMlt[1] = this.zhong
						if (curSlct[1] > 3)
							curSlct[1] = 0
					}
				}
				this.gradeMlt = gradeMlt
			},
		}
	}
</script>

<style>

</style>
